<template>
  <div id="orderDetail">
    <van-nav-bar class="header"
                 fixed
                 @click-left="goback"
                 :border="false">
      <div class="left"
           slot="left">
        <van-icon name="arrow-left"
                  size="24px"
                  color="#fff" />
      </div>
      <div class="title"
           slot="title">订单详情</div>
    </van-nav-bar>
    <div class="main">
      <detail-card :form="form"
                   type='1'
                   :groupUids="groupUids"
                   @open_popup="open_popup"
                   @updateOrder="updateOrder"
                   @successPay="successPay"
                   @changePay="changePay"
                   @show_regular="show_regular"></detail-card>
      <regular-popup :showRegular="showRegular"
                     @close_popup="close_regular"></regular-popup>
      <reselect-popup :showPopup="showPopup"
                      :orderUid="orderUid"
                      @close_popup="close_popup"></reselect-popup>
    </div>
    <div v-if="isPayWay"
         class="upDoor-popup pay-way-box">
      <div class="mask"></div>
      <div class="inner">
        <div class="flex flex-space-x handle-head">
          <div></div>
          <div class="title-name">请选择支付方式</div>
          <div class="close-block"
               v-on:click="isPayWay = false, payRun = false">
            <i class="iconfont icon-guanbi1"></i>
          </div>
        </div>
        <div class="pay-list">
          <div class="pay-item flex flex-center-y flex-space-x"
               v-for="(item, index) in payWayList"
               :key="index"
               v-on:click="switchPayWay(index)">
            <div class="flex flex-center-y">
              <i v-if="item.icon"
                 class="pay-way-wconfont iconfont"
                 :class="[item.icon]"
                 :style="item.styles"></i>
              <img class="pay-way-wconfont"
                   v-if="item.img"
                   :src="item.img" />
              <span>{{item.name}}</span>
            </div>
            <i v-if="payOrderPayWayActiveIndex === index"
               class="select-block iconfont icon-dui"></i>
            <i v-else></i>
          </div>
          <div class="pay-item flex flex-center-y flex-space-x"
               v-on:click="addBank">
            <div class="flex flex-center-y">
              <img class="pay-way-wconfont"
                   src="@/assets/img/performance/homePage/bank.png" />
              <span>银行卡账号</span>
            </div>
            <div class="add"
                 v-on:click="addBank">
              <span>添加</span>
              <i class="iconfont icon-iconfonticonfonti2copycopy"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import detailCard from "@/components/designer/orderCenter/orderDetail/detailCard";
import reselectPopup from "@/components/designer/orderCenter/reselectPopup";
import regularPopup from "@/components/designer/orderCenter/orderDetail/regularPopup";
import { mapState, mapMutations } from "vuex";
import { Copy } from "@/utils/object";
import { paying } from "@/utils/pay.js";
import { getRemind } from "@/utils/chat.js";
import { getToken, getuserUid, getRole } from "@/utils/auth";
import { defaultPayWayList } from "@/pages/performance/homePage/children_page/pay_order/constant.js";
export default {
  data() {
    return {
      form: {},
      showRegular: false,
      showPopup: false,
      payWayList: defaultPayWayList,
      isPayWay: false,
      groupUids: getRemind(),
      // 在支付中
      payRun: false,
      currentPayType: "",
        // 循环监听订单
      isLoopOrder: false,
      toastl:null

    };
  },
  computed: {
    ...mapState(
      // {
      //   orderUid: state => state.orderUid,
      //   iconUrl: state => state.iconUrl
      // },
      ["payOrderPayWayActiveIndex", "orderUid"]
    )
  },
  created() {
    this.toastl= this.$toast.loading({
      duration: 0,
      message: "加载中..."
    });
    this.order_detail();
    let loop = () => {
      if(this.isLoopOrder){
        this.order_detail()
        setTimeout(loop, 10e3)
      }
    }
    this.isLoopOrder = true
    loop()
  },
  methods: {
    successPay(item, type) {
      this.currentPayType = type;
      // loading
      const toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        mask: true,
        loadingType: "spinner",
        message: "加载中"
      });
      this.orderItem = item;
      // 加载银行卡列表
      this.bankList(item.userUid);
    },
    changePay(item, type) {
      this.currentPayType = type;
      this.orderItem = item;
      // 加载银行卡列表
      this.bankList(item.userUid);
    },
    addBank() {
      // if (!this.businessUserUid) {
      //   this.$toast("加载中");
      //   return;
      // }
      this.$router.push("/performance/bindbank?type=3&userUid=" + getuserUid());
    },
    switchPayWay(index) {
      if (this.payRun) {
        this.$toast("支付中");
        console.log("锁");
        return;
      }
      // this.UPDATE(['payOrderPayWayActiveIndex', index])
      // this.payOrderPayWayActiveIndex = index;
      // this.isPayWay = false
      // 处理支付
      let payType = index === 0 ? 2 : index === 1 ? 1 : 3;
      switch (this.currentPayType) {
        case "changeImagePay": {
          this.updateImagePay(payType, index);
          break;
        }
        case "getImage": {
          this.getImages(payType, index);
          break;
        }
        default: {
          console.log("匹配异常");
        }
      }
    },
    // 改图支付
    async updateImagePay(payType, index) {
      let params = {
        orderUid: this.orderItem.uid,
        userUid: getuserUid(),
        payType
      };
      this.payRun = true;
      if (payType === 3) {
        params.bankCardUid = this.payWayList[index].uid;
      }
      let payResponse;
      try {
        payResponse = await HTTP("app/buser/payGOrder", params);
      } catch (error) {
        console.log(error);
        this.$toast("服务器开小差了");
        return;
      }
      if (payResponse.code !== 200) {
        this.$toast(payResponse.msg || "异常");
        this.payRun = false;
        return;
      }
      // 处理请求
      let outTradeNo = payResponse.msg;
      this.payRun = false;
      paying(
        {
          url: "app/buser/payGOrder",
          params
        },
        payType,
        payResponse.data,
        outTradeNo
      );
    },
    updateOrder() {
      this.order_detail();
    },
    // 收图
    async getImages(payType, index) {
      console.log("-------确认收图----------");
      console.log(this.orderItem);
      console.log(this.order);
      let params = {
        userUid: getuserUid(),
        orderUid: this.orderItem.uid,
        payType: this.orderItem.subsequentAmount > 0 ? payType : ""
      };
      if (payType === 3) {
        params.bankCardUid = this.payWayList[index].uid;
      }

      this.payRun = true;
      // 请求支付信息
      let payResponse = await HTTP("order/updateOrdersStatus", params);
      console.log(this.orderItem.subsequentAmount);
      console.log(params);
      console.log(payResponse);
      if (payResponse.code !== 200) {
        this.$toast(payResponse.msg || "异常");
        this.payRun = false;
        return;
      }
      // 处理请求
      let outTradeNo = payResponse.msg;
      this.payRun = false;
      paying(
        {
          url: "order/updateOrdersStatus",
          params
        },
        payType,
        payResponse.data,
        outTradeNo
      );
    },
    async bankList(userUid) {
      let params = {
        userUid
      };
      let bankResponse;
      const toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        mask: true,
        loadingType: "spinner",
        message: "加载中"
      });
      try {
        // TEST toast
        // await new Promise(e => {
        //   window.setTimeout(e, 1e3);
        // });
        bankResponse = await HTTP("app/user/getUserBankCards", params);
        if (bankResponse.code !== 200) {
          this.$toast(bankResponse.msg);
          return;
        }
        console.log("银行卡列表");
        console.log(bankResponse.data);
        this.payWayList = [
          ...defaultPayWayList,
          ...bankResponse.data.map(e => {
            return {
              ...e,
              name: `${
                e.bankName ? e.bankName : "银行卡"
              }(${e.bankCardNumber.substr(e.bankCardNumber.length - 4)})`,
              img: require("@/assets/img/performance/homePage/bank.png")
            };
          })
        ];
        // this.orightBankList = bankResponse.data
        this.isPayWay = true;
        toast.clear();
      } catch (error) {
        toast.clear();
        this.$toast("数据开小差了");
        console.log(error);
      }
    },
    async order_detail() {
      const e = await HTTP("order_detail1", {
        uid: this.orderUid,
        role: 1,
        userUid: getuserUid(),
      });
      if (e.code == 200) {
        this.form = e.data;
        this.toastl.clear()
      } else {
        this.$toast(e.msg || "服务器异常");
        this.toastl.clear()
      }
      // console.log(e);
    },
    goback() {
      this.$router.go(-1);
    },
    //展示规则
    show_regular() {
      this.showRegular = true;
    },
    //关闭规则
    close_regular() {
      this.showRegular = false;
    },
    //打开弹框
    open_popup() {
      this.showPopup = true;
    },
    //关闭弹框
    close_popup() {
      this.showPopup = false;
    }
  },
  destroyed(){
    // this.$toast.clear()
    this.isLoopOrder = false
  },
  components: {
    detailCard,
    regularPopup,
    reselectPopup
  }
};
</script>
<style lang="scss" scoped>
#orderDetail {
  .header {
    height: 0.92rem;
    background: $color-primary;
    z-index: 200;
    .title {
      color: #ffffff;
    }
  }
  .main {
    margin-top: 0.92rem;
    padding-top: 0.24rem;
  }
  .upDoor-popup {
    position: fixed;
    width: 100%;
    bottom: 0px;
    height: 100%;
    left: 0px;
    z-index: 500;
    .mask {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .inner {
      position: absolute;
      bottom: 0px;
      width: 100%;
      .handleColum {
        padding: 0.29rem 0.24rem;
        color: #656565;
        background: #fff;
        font-size: 0.32rem;
        .done {
          color: #5e8efe;
        }
      }
    }
  }
  .pay-way-box {
    .handle-head {
      border-radius: 0.3rem 0.3rem 0px 0px;
      background-color: #fff;
      height: 1rem;
      line-height: 1rem;
      width: 100%;
      .title-name {
        font-size: 0.32rem;
      }
      .close-block {
        margin-right: 0.24rem;
        .iconfont {
          color: #b1b1b1;
          font-size: 0.36rem;
        }
      }
    }
    .pay-list {
      font-size: 0.28rem;
      max-height: 75vh;
      overflow: auto;
      .pay-item {
        height: 1.36rem;
        border-top: 1px solid #ededed;
        background-color: #fff;
        padding: 0px 0.24rem;
        box-sizing: border-box;
        .pay-way-wconfont {
          width: 0.64rem;
          height: 0.64rem;
          font-size: 0.64rem;
          display: inline-block;
          margin-right: 0.2rem;
        }
        .select-block {
          display: inline-block;
          height: 0.24rem;
          font-size: 0.24rem !important;
          color: #5e8efe;
        }
        .add {
          color: $color-text-regular;
          font-size: 0.28rem;
          .iconfont {
            color: #aaa;
            font-size: 0.24rem;
          }
        }
      }
    }
  }
}
</style>
